/**
 * Basic CSS styles for the Content management system
 * @author Shengzhi Cheung
 * @email shengzhizhang@gmail.com
 * @since 1.0
 */

body { position:relative; padding-top:40px; background-color:#fff; }

/* Subnav */
.subnav {
  width: 100%;
  height: 36px;
  background-color: #eeeeee; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.subnav .nav {
  margin-bottom: 0;
}
.subnav .nav > li > a {
  margin: 0;
  padding-top:    11px;
  padding-bottom: 11px;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #e5e5e5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover {
  padding-left: 13px;
  color: #777;
  background-color: #e9e9e9;
  border-right-color: #ddd;
  border-left: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
}
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
  border-top-color: #777;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
  border-left: 0;
  padding-left: 12px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.subnav .nav > li:last-child > a {
  border-right: 0;
}
.subnav .dropdown-menu {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
@media (min-width: 550px) {
  .subnav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
    border-color: #d5d5d5;
    border-width: 0 0 1px; /* drop the border on the fixed edges */
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
  }
}

/* Toolbar */
.subnav .btn-toolbar { float:right; margin:4px 20px 0 0; }

/* Breadcrumbs */
.breadcrumbs { margin:10px 0 0 20px; }
.breadcrumbs em { margin:0 10px; font-style:normal; }

/* View Content */
.view-cont { padding:0 20px;}

/* Page Header */
.page-header .btn { float:right; margin-left:10px; _display:inline; }

/* Grid Table */
.table thead tr.filters td { border-top:1px solid #ddd; }
.loading{ display:none; position:absolute; left:50%; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px; background:url(img/loading.gif) no-repeat; } 
.grid-view-loading .loading { display:inline; } 
.grid-view table.items th { 
    background-color: #f3f3f3; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #fff 0%, #f3f3f3 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #fff 0%,#f3f3f3 100%); /* Chrome 10+,Safari 5.1+ */
    background-image: -ms-linear-gradient(top, #fff 0%,#f3f3f3 100%); /* IE10+ */
    background-image: -o-linear-gradient(top, #fff 0%,#f3f3f3 100%); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
    background-image: linear-gradient(top, #fff 0%,#f3f3f3 100%); /* W3C */
}
.grid-view table.items th a.asc { background:url(img/up.gif) right center no-repeat; padding-right:10px; }
.grid-view table.items th a.desc { background:url(img/down.gif) right center no-repeat; padding-right:10px; } 
.summary { position:relative; margin:10px 0; }
.grid-view input, .grid-view textarea, .grid-view select { width:100%; margin:0; outline:none; }
.grid-view input { padding:4px 0; }
.grid-view .link-column img { border:0; } 
.grid-view .button-column { text-align:center; width:60px; }
.grid-view .button-column img { vertical-align:middle; }
.grid-view .checkbox-column { width:15px; }

/* Form */
form { margin:0; }
.form span.required { color:#f00; }

/* Form in modal */
.modal-body.form-wrap { padding:0; }
.modal-body .form-actions { margin-bottom:0; border-radius:0 0 6px 6px; }
.modal-body .form-actions .btn { margin-right:10px; }

/*Icons*/
.ico-warning,
.ico-ok,
.ico-info { background:url(img/ico_bg.png) no-repeat; }
.ico-ok { background-position:0 -60px; }
.ico-info { background-position:0 -120px; }

.tips, .tips-warning { line-height:24px; padding:40px 20px; }
.tips i { float:left; width:60px; height:60px; }
.tips .cont { margin-left:80px; }
.tips .cont h4 { margin:0 0 10px; font-weight:bold; }
.tips-warning .cont h4 { color:#9D261D; }
.tips-ok .cont h4 { color:#46a546; }
.tips-info .cont h4 { color:#049cdb; }

.color-piece { display:inline-block; width:20px; height:20px; border:3px solid #ddd; }

/*Product*/
.thumb-list { margin:5px 0 0; padding:0; list-style:none; overflow:hidden; }
.thumb-list li { position:relative; float:left; width:120px; height:90px; padding:1px; margin:0 5px 5px 0; border:4px solid #ddd; }
.thumb-list li .pic { width:120px; height:90px; background:#fff; overflow:hidden; }
.thumb-list li span { display:none; position:absolute; right:0; bottom:0; width:50px; height:18px; background:#2688CC; color:#fff; text-align:center; border-radius:4px 0 0 0; }
.thumb-list .cover { border-color:#2688CC; }
.thumb-list .cover span { display:inline; }

